<template>
  <el-container style="height: 100%;width: 100%">
    <el-main>
      <el-row :gutter="20" style="width: 100%;height: 100%;">
        <el-col :span="4" style="height: 100%">
          <el-container class="panal">
            <el-header style="height: 40px;padding-left: 20px;border-bottom: 1px solid rgba(7,118,181,.7);line-height: 40px;font-size: 16px;font-weight: 300">
              查询条件
            </el-header>
            <el-main style="padding: 0">
              <el-row style="height: 40px;padding-left: 20px;border-bottom: 1px solid rgba(7,118,181,.7);line-height: 40px;font-size: 16px;font-weight: 300">
                请选择时间:
              </el-row>
              <el-row style="height: 40px;padding-left: 20px;line-height: 40px;font-size: 16px;font-weight: 300">
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-row>
              <el-row style="height: 40px;padding-left: 20px;border-top: 1px solid rgba(7,118,181,.7);line-height: 40px;font-size: 16px;font-weight: 300;margin-top: 10px">
                请选择车间:
              </el-row>
              <el-row style="padding-left: 20px;border-top: 1px solid rgba(7,118,181,.7);line-height: 40px;font-size: 16px;font-weight: 300">
                <el-radio-group v-model="radio1">
                  <el-radio-button  label="氯碱车间"></el-radio-button>
                  <el-radio-button label="双氧水车间"></el-radio-button>
                  <el-radio-button label="环氧丙烷车间"></el-radio-button>
                  <el-radio-button label="蒽醌车间"></el-radio-button>
                </el-radio-group>
              </el-row>
              <el-row style="border-top: 1px solid rgba(7,118,181,.7);margin-top: 10px">
                <el-row style="width: 200px;height: 60px;margin-left: auto;margin-right: auto;">
                  <el-button  type="primary" style="color: white;background-color:#061431; border: 1px solid #1A6288;margin-left: auto;margin-right: auto;width: 200px;margin-top: 20px" >查询</el-button>
                </el-row>
                <el-row style="width: 200px;height: 60px;margin-left: auto;margin-right: auto;">
                  <el-button  type="primary" style="color: white;background-color:#061431; border: 1px solid #1A6288;margin-left: auto;margin-right: auto;width: 200px;margin-top: 20px" >导出EXCEL</el-button>
                </el-row>
              </el-row>
            </el-main>
          </el-container>
        </el-col>
        <el-col :span="20" style="height: 100%">
          <el-container class="panal">
            <el-header style="height: 40px;padding-left: 20px;border-bottom: 1px solid rgba(7,118,181,.7);line-height: 40px;font-size: 16px;font-weight: 300">
              成本核算
            </el-header>
            <el-main>
              <table style="width: 100%">
                <thead>
                <tr>
                  <th  colspan="6" style="text-align: center;font-size: 20px;font-weight: bold">氯碱车间成本核算</th>
                  <th colspan="2"   style="text-align: center;">时间:2025-03-27</th>
                </tr>
                <tr>
                  <th style="text-align: center;"></th>
                  <th  style="text-align: center;">单位消耗(/吨)</th>
                  <th  style="text-align: center;">原料单价(含税)(元)</th>
                  <th  style="text-align: center;">原料单价(不含税)(元)</th>
                  <th  style="text-align: center;">单位成本(不含税)(元)</th>
                  <th  style="text-align: center;">单位成本(含税)(元)</th>
                  <th  style="text-align: center;">本日累计产量(吨)</th>
                  <th  style="text-align: center;">合计(元)</th>
                </tr>
                </thead>
                <tbody style="color: #D2C172;text-align: center">
                <tr style="text-align: left;color: white;">
                  <td colspan="8" style="padding-left: 40px;font-size: 16px;font-weight: bold">1.原材料消耗</td>
                </tr>
                <tr>
                  <td>日晒工业盐（海盐）</td>
                  <td >0.952</td>
                  <td>379.17</td>
                  <td>335.55</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                <tr>
                  <td>精制工业盐（井矿盐）</td>
                  <td >0.952</td>
                  <td>379.17</td>
                  <td>335.55</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                <tr>
                  <td>碳酸钠</td>
                  <td >0.952</td>
                  <td>379.17</td>
                  <td>335.55</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                <tr>
                  <td>亚硫酸钠</td>
                  <td >0.952</td>
                  <td>379.17</td>
                  <td>335.55</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                <tr>
                  <td>次氯酸钠</td>
                  <td >0.952</td>
                  <td>379.17</td>
                  <td>335.55</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                <tr>
                  <td>高纯盐酸（31%）</td>
                  <td >0.952</td>
                  <td>379.17</td>
                  <td>335.55</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                <tr>
                  <td>浓硫酸</td>
                  <td >0.952</td>
                  <td>379.17</td>
                  <td>335.55</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                <tr>
                  <td>小计</td>
                  <td >0.952</td>
                  <td>379.17</td>
                  <td>335.55</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                </tbody>
                <tbody style="color: #D2C172;text-align: center">
                <tr style="text-align: left;color: white;">
                  <td colspan="8" style="padding-left: 40px;font-size: 16px;font-weight: bold">2.燃动费</td>
                </tr>
                <tr>
                  <td>水</td>
                  <td >0.952</td>
                  <td>379.17</td>
                  <td>335.55</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                <tr>
                  <td>电</td>
                  <td >0.952</td>
                  <td>379.17</td>
                  <td>335.55</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                <tr>
                  <td>0.5Mpa蒸气</td>
                  <td >0.952</td>
                  <td>379.17</td>
                  <td>335.55</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                <tr>
                  <td>0.8Mpa蒸气</td>
                  <td >0.952</td>
                  <td>379.17</td>
                  <td>335.55</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                </tbody>
                <tbody style="color: #D2C172;text-align: center">
                <tr style="text-align: left;color: white;">
                  <td colspan="8" style="padding-left: 40px;font-size: 16px;font-weight: bold">3.制造费用</td>
                </tr>
                <tr>
                  <td>折旧</td>
                  <td >0.952</td>
                  <td>379.17</td>
                  <td>335.55</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                <tr>
                  <td>材料消耗</td>
                  <td >0.952</td>
                  <td>379.17</td>
                  <td>335.55</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                <tr>
                  <td>维修费用</td>
                  <td >0.952</td>
                  <td>379.17</td>
                  <td>335.55</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                <tr>
                  <td>其它费用</td>
                  <td >0.952</td>
                  <td>379.17</td>
                  <td>335.55</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                </tbody>
                <tbody style="color: #D2C172;text-align: center">
                <tr style="text-align: left;color: white;">
                  <td colspan="8" style="padding-left: 40px;font-size: 16px;font-weight: bold">4.人工费用</td>
                </tr>
                <tr>
                  <td>人工费用</td>
                  <td >/</td>
                  <td>/</td>
                  <td>/</td>
                  <td>/</td>
                  <td>8962.5</td>
                  <td>60</td>
                  <td>50万</td>
                </tr>
                </tbody>
                <tbody style="color: #D2C172;text-align: center">
                <tr style="text-align: left;color: white;">
                  <td colspan="8" style="padding-left: 40px;font-size: 16px;font-weight: bold">5.冲副产品</td>
                </tr>
                <tr>
                  <td>液氯</td>
                  <td >500</td>
                  <td>-518.87</td>
                  <td>-450.48</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                <tr>
                  <td>次氯酸钠</td>
                  <td >500</td>
                  <td>-518.87</td>
                  <td>-450.48</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                <tr>
                  <td>盐酸</td>
                  <td >500</td>
                  <td>-518.87</td>
                  <td>-450.48</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                <tr>
                  <td>氢气</td>
                  <td >500</td>
                  <td>-518.87</td>
                  <td>-450.48</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                <tr>
                  <td>稀硫酸</td>
                  <td >500</td>
                  <td>-518.87</td>
                  <td>-450.48</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                <tr>
                  <td>芒硝</td>
                  <td >500</td>
                  <td>-518.87</td>
                  <td>-450.48</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                <tr>
                  <td>盐泥</td>
                  <td >500</td>
                  <td>-518.87</td>
                  <td>-450.48</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                <tr>
                  <td>合计</td>
                  <td >500</td>
                  <td>-518.87</td>
                  <td>-450.48</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                </tbody>
                <tbody style="color: #D2C172;text-align: center">
                <tr style="text-align: left;color: white;">
                  <td colspan="8" style="padding-left: 40px;font-size: 16px;font-weight: bold">7.产品</td>
                </tr>

                <tr style="color: white">
                  <td style="text-align: center;">产品</td>
                  <td  style="text-align: center;">销售单价（含税)</td>
                  <td style="text-align: center;">销售单价（不含税）</td>
                  <td  style="text-align: center;">单位成本(不含税)</td>
                  <td  style="text-align: center;">单位运费</td>
                  <td  style="text-align: center;">毛利</td>
                  <td  style="text-align: center;">毛利率</td>
                  <td  style="text-align: center;">日毛利总额</td>
                </tr>
                <tr>
                  <td>32%烧碱</td>
                  <td >500</td>
                  <td>-518.87</td>
                  <td>-450.48</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                <tr>
                  <td>50%烧碱</td>
                  <td >500</td>
                  <td>-518.87</td>
                  <td>-450.48</td>
                  <td>319.29</td>
                  <td>575.91</td>
                  <td>8250</td>
                  <td>13500</td>
                </tr>
                </tbody>
              </table>
            </el-main>
          </el-container>
        </el-col>

      </el-row>
    </el-main>
    <el-dialog
      :title="selftTitle"
      :visible.sync="selfVisual"
      width="70%"
    >
      <table style="width: 100%">
        <thead>
        <tr style="color: white;height: 40px">
          <th style="text-align: center;">序号</th>
          <th  style="text-align: center;">物料名称</th>
          <th  style="text-align: center;" >单位</th>
          <th  style="text-align: center;">数量</th>
          <th  style="text-align: center;">备注</th>
        </tr>
        </thead>
        <tbody style="color: #D2C172;text-align: center">
        <tr v-for="(item,index) in 10" style="height: 40px">
          <td>{{index+1}}</td>
          <td>32%烧碱</td>
          <td>吨</td>
          <td>937.67</td>
          <td >环保运行：36.07T，公辅：1.29T，蒽醌：T</td>
        </tr>
        <tr style="height: 40px">
          <td>合计</td>
          <td>32%烧碱</td>
          <td>吨</td>
          <td >937.67</td>
          <td >/</td>
        </tr>
        </tbody>
      </table>

    </el-dialog>
    <el-dialog
      :title="monthSaleTitle"
      :visible.sync="monthSaleVisual"
      width="70%"
    >
      <table style="width: 100%">
        <thead>
        <tr style="color: white;height: 40px">
          <th style="text-align: center;">序号</th>
          <th  style="text-align: center;">物料名称</th>
          <th  style="text-align: center;" >单位</th>
          <th  style="text-align: center;">销售数量</th>
          <th  style="text-align: center;">销售日期</th>
          <th  style="text-align: center;">车辆数量</th>
          <th  style="text-align: center;">出货吨数</th>
          <th  style="text-align: center;">管道运输数量</th>
        </tr>
        </thead>
        <tbody style="color: #D2C172;text-align: center">
        <tr v-for="(item,index) in 10" style="height: 40px">
          <td>{{index+1}}</td>
          <td>32%烧碱</td>
          <td>吨</td>
          <td>937.67</td>
          <td>2025-03-{{index+1}}</td>
          <td >{{index+20}}</td>
          <td >{{index+20}}</td>
          <td >{{index+20}}</td>
        </tr>
        <tr v-for="(item,index) in 10" style="height: 40px">
          <td>{{index+11}}</td>
          <td>32%烧碱</td>
          <td>吨</td>
          <td>937.67</td>
          <td>2025-03-{{index+11}}</td>
          <td >{{index+20}}</td>
          <td >{{index+20}}</td>
          <td >{{index+20}}</td>
        </tr>
        <tr v-for="(item,index) in 10" style="height: 40px">
          <td>{{index+21}}</td>
          <td>32%烧碱</td>
          <td>吨</td>
          <td>937.67</td>
          <td>2025-03-{{index+21}}</td>
          <td >{{index+20}}</td>
          <td >{{index+20}}</td>
          <td >{{index+20}}</td>
        </tr>
        <tr style="height: 40px">
          <td>合计</td>
          <td>32%烧碱</td>
          <td>吨</td>
          <td >937.67</td>
          <td >/</td>
          <td >40</td>
          <td >80</td>
          <td >80</td>
        </tr>
        </tbody>
      </table>

    </el-dialog>
    <el-dialog
      :title="monthProTitle"
      :visible.sync="monthProVisual"
      width="70%"
    >
      <table style="width: 100%">
        <thead>
        <tr style="color: white;height: 40px">
          <th style="text-align: center;">序号</th>
          <th  style="text-align: center;">物料名称</th>
          <th  style="text-align: center;" >单位</th>
          <th  style="text-align: center;">生产数量</th>
          <th  style="text-align: center;">生产日期</th>
        </tr>
        </thead>
        <tbody style="color: #D2C172;text-align: center">
        <tr v-for="(item,index) in 10" style="height: 40px">
          <td>{{index+1}}</td>
          <td>32%烧碱</td>
          <td>吨</td>
          <td>937.67</td>
          <td>2025-03-{{index+1}}</td>


        </tr>
        <tr v-for="(item,index) in 10" style="height: 40px">
          <td>{{index+11}}</td>
          <td>32%烧碱</td>
          <td>吨</td>
          <td>937.67</td>
          <td>2025-03-{{index+11}}</td>


        </tr>
        <tr v-for="(item,index) in 10" style="height: 40px">
          <td>{{index+21}}</td>
          <td>32%烧碱</td>
          <td>吨</td>
          <td>937.67</td>
          <td>2025-03-{{index+21}}</td>
        </tr>
        <tr style="height: 40px">
          <td>合计</td>
          <td>32%烧碱</td>
          <td>吨</td>
          <td >937.67</td>
          <td >/</td>
        </tr>
        </tbody>
      </table>

    </el-dialog>

  </el-container>
</template>

<script>
  export default {
    name: 'index',
    data() {
      return {
        radio1:"",
        radio2:"",
        selfVisual:false,
        selftTitle:"",
        monthSaleTitle:"",
        monthSaleVisual:false,
        monthProTitle:"",
        monthProVisual:false
      }
    },
    methods:{
      selectSelf(){
        this.selftTitle="32%液碱本月本厂使用情况";
        this.selfVisual=true;
      },
      monthSale(){
        this.monthSaleTitle="32%液碱本月销售情况"
        this.monthSaleVisual=true;
      },
      monthPro(){
        this.monthProTitle="32%液碱本月生产数量";
        this.monthProVisual=true;
      }
    }
  }
</script>

<style scoped>
  .panal{
    width: 100%;
    height: 100%;
    background: url("../../../assets/bi/imgs/panel.png") no-repeat center;
    background-size: 100% 100%;
  }
  table, th, td {
    border: 1px solid #368AB6;
    border-collapse: collapse;
  }

</style>
